<template>
  <button
    class="action-btn"
    :class="[`action-btn--${variant}`, { 'action-btn--disabled': disabled }]"
    :disabled="disabled"
    :title="tooltip"
    @click="handleClick"
  >
    <component :is="icon" :size="iconSize" />
    <span v-if="showText" class="action-btn__text">{{ text }}</span>
  </button>
</template>

<script setup lang="ts">
import type { Component } from 'vue'

interface Props {
  icon: Component
  variant?: 'primary' | 'success' | 'info' | 'warning' | 'secondary' | 'danger'
  text?: string
  showText?: boolean
  disabled?: boolean
  tooltip?: string
  iconSize?: number
}

interface Emits {
  (e: 'click', event: MouseEvent): void
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'secondary',
  showText: false,
  disabled: false,
  iconSize: 16
})

const emit = defineEmits<Emits>()

const handleClick = (event: MouseEvent): void => {
  if (!props.disabled) {
    emit('click', event)
  }
}
</script>

<style scoped>
.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

/* 当有文字时自动调整宽度 */
.action-btn:has(.action-btn__text) {
  width: auto;
  padding: 0 12px;
}

.action-btn--primary {
  background-color: var(--primary-color);
  color: white;
}

.action-btn--primary:hover:not(.action-btn--disabled) {
  background-color: var(--primary-color-hover);
}

.action-btn--success {
  background-color: #4caf50;
  color: white;
}

.action-btn--success:hover:not(.action-btn--disabled) {
  background-color: #45a049;
}

.action-btn--info {
  background-color: #2196f3;
  color: white;
}

.action-btn--info:hover:not(.action-btn--disabled) {
  background-color: #1976d2;
}

.action-btn--warning {
  background-color: #ff9800;
  color: white;
}

.action-btn--warning:hover:not(.action-btn--disabled) {
  background-color: #f57c00;
}

.action-btn--danger {
  background-color: #f44336;
  color: white;
}

.action-btn--danger:hover:not(.action-btn--disabled) {
  background-color: #d32f2f;
}

.action-btn--secondary {
  background-color: var(--background-color-tertiary);
  color: var(--text-color-secondary);
}

.action-btn--secondary:hover:not(.action-btn--disabled) {
  background-color: var(--background-color-primary);
  color: var(--text-color-primary);
}

.action-btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.action-btn__text {
  margin-left: 6px;
  white-space: nowrap;
}
</style>
